<template>
  <div class="queryHeader">
    <ul>
      <li @click="jumpJzr"
          class="jzr">
        <span class="text-main">选择就诊人</span>
        <span class="selector selector1">{{this.userInfo.name}}</span>
      </li>
      <li class="date">
        <div class="left">
          <div class="selector"
               @click="selectYear('start')">
            <div class="show_year">
              <p>{{this.startTime}}</p>
              <i class="icon"></i>
            </div>
          </div>
          <span class="bt text-main">至</span>
          <div class="selector"
               @click="selectYear('end')">
            <div class="show_year">
              <p>{{this.endTime}}</p>
              <i class="icon"></i>
            </div>
          </div>
        </div>
        <div class="btnBox"
             @click="ifSearch('1')">
          <div class="btn"></div>
        </div>
      </li>
    </ul>

    <mt-datetime-picker v-model="dateVal"
                        type="date"
                        ref="datePicker"
                        year-format="{value} 年"
                        month-format="{value} 月"
                        date-format="{value} 日"
                        :endDate="new Date()"
                        @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
</template>

<script>
import { DatetimePicker } from 'mint-ui';
export default {
  name: "queryHeader",
  props: ['data'],
  data () {
    return {
      dateVal: '',
      startTime: '',
      endTime: '',
      isClicked: false,
      type: '',
      userInfo: '',
      quertData: ''
    }
  },
  mounted () {
    if (this.$parent.initView) {
      this.$parent.initView();
    }

    this.initView();
    this.getjzrInfo();


  },
  methods: {
    selectYear (type) {
      this.type = type;
      this.$refs.datePicker.open();
    },
    handleConfirm (value) {
      let year = value.getFullYear();
      let month = value.getMonth() + 1;
      let date = value.getDate();
      if (this.type == 'start') {
        this.startTime = year + '-' + month + '-' + date;
      } else {
        this.endTime = year + '-' + month + '-' + date;
      }
    },
    setDataFn () {
      let setData = this.quertData ? this.quertData : {};
      setData['startTime'] = this.startTime;
      setData['endTime'] = this.endTime;
      setData['tab'] = this.data ? this.data['tab'] : '';
      setData = JSON.stringify(setData);
      sessionStorage.setItem('quertHeaderData', setData);
    },
    initView () {
      let quertData = sessionStorage.getItem('quertHeaderData');
      quertData = quertData ? JSON.parse(quertData) : '';

      let startTime = this.$public.getDate(-7);
      let endTime = this.$public.getDate(0);
      if (quertData) {
        startTime = quertData['startTime'] ? quertData['startTime'] : startTime;
        endTime = quertData['endTime'] ? quertData['endTime'] : endTime;
      }

      this.startTime = startTime;
      this.endTime = endTime;
      this.quertData = quertData;
    },
    jumpJzr () {
      this.setDataFn();

      this.$router.push({ name: "familyindex", query: { "from": "checkCard" } });
    },
    ifSearch (type) {
      let userInfo = this.userInfo;
      if (userInfo && userInfo['klx'] && userInfo['kh']) {
        this.search(type);
      } else {
        this.$public.toast('请选择就诊人！');
        this.$parent.ajaxEnd();
      }
    },
    getjzrInfo () {
      let familyinfo = sessionStorage.getItem('familyinfo');
      familyinfo = familyinfo ? JSON.parse(familyinfo) : '';
      let data = '';
      if (familyinfo) {
        this.setNeedData(familyinfo);
      } else {
        //默认就诊人
        this.$getInfo.getDefaultInfo().then(res => {
          data = res ? JSON.parse(res) : '';
          this.setNeedData(data);
        })
      }
      // obj = {
      //     // kh:this.$public.encrypt('510704199409233518'),
      //     kh:'6B8BFA92E59E70B0A7330388DBBCBE7B5279C51281C341794BE214C854B92883',//门诊缴费
      //     // kh:'4ABF5796D3DE5B3F5A06337D2EAC6C3F0D6751F734539FA06B25C86973831E5C',//检查数据
      //     // kh:'89434057F659EF25FE7C0FAD845627D5127915679332D79CB4F7F24C11275DF4', //住院缴费
      //     klx:'01',
      //     name:'呼哈哈',
      //     sex:'女',
      //     age:'24'
      // }


    },
    setNeedData (data) {
      let obj = '';
      if (data) {
        let sfzh = this.$public.decrypt(data['sfzh']);
        let sex = data['sex'] ? data['sex'] : this.$public.idcardGetinfo(sfzh, 2);
        obj = {
          kh: data['sfzh'],
          klx: '01',//mrjzk['jzklx']
          name: data['xm'],
          sex: sex == '1' ? '男' : (sex == '2' ? '女' : '未知性别'),
          age: this.$public.idcardGetinfo(sfzh, 3)
        }
      }

      this.userInfo = obj;
      this.ifSearch();
    },
    search (type) {
      let hosInfo = JSON.parse(sessionStorage.getItem('hosInfo') ? sessionStorage.getItem('hosInfo') : '{}');
      let obj = {
        hosCode: hosInfo['hosCode'],
        hosName: hosInfo['hosName'],
        startTime: this.startTime,
        endTime: this.endTime,
        userInfo: this.userInfo

        // hosCode:'45115309X',//  住院缴费 
        // hosCode:'451134681',//门诊缴费

        // startTime:'2018-09-09',
        // startTime:'2018-01-01', //门诊缴费
        // endTime:'2019-12-09',
      }

      this.$parent.search(obj, type);
    }

  }

};
</script>
<style lang="stylus" scoped>
.date
  .selector
    width 100%
    margin-left 0.5rem
.queryHeader
  background white
.selector
  position relative
  &:before
    content ''
    font-size 1rem
    position absolute
    top 0
    bottom 0
    right 0
    margin auto
    width 0.2rem
    height 0.3rem
    background url('../assets/images/arrow-left.png') no-repeat 0 0 / 100% 100%
    transform rotate(90deg)
.selector1
  padding-right 0.5rem
  &:before
    right 0rem
    transform rotate(0deg)
.text-main
  color $text-main
.bt
  margin 0 0.4rem
.queryHeader li
  font-size $font-h2
  position relative
  height 1.3rem
  line-height 1.3rem
  &:after
    content ' '
    position absolute
    bottom 0
    left 0
    width 100%
    height 1Px
    background $border-color
    transform scaleY(0.5)
.jzr
  padding 0 0.5rem
li
  display flex
  align-items center
  justify-content space-between
.left
  display flex
  align-items center
  justify-content space-between
  margin-right 0.3rem
  width 100%
  position relative
.btn
  min-width 0.6rem
  max-width 0.6rem
  height 0.6rem
  background url('../assets/images/fdj.png') no-repeat 0 0 / 0.6rem 0.6rem
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  margin auto
.btnBox
  height 100%
  width 1.9rem
  position relative
  &:after
    content ' '
    position absolute
    top 0
    left 0
    height 100%
    width 1Px
    background $border-color
    transform scaleX(0.5)
</style>